<!--
   name:服务费管理
   time:2021-10-22
   by:Mr_wu
-->

<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!--    筛选区    -->
            <div class="filter f f-a-c">
                <div>过期时间</div>
<!--                <el-date-picker size="mini" type="datetimerange" unlink-panels v-model="dateArr"-->
<!--                                class="mar-left-20"-->
<!--                                @change="changesearchmac" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00','23:59:00']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">-->
<!--                </el-date-picker>-->
                <el-tooltip class="item" effect="dark" content="截止该日期内到期的机器" placement="top">
                    <el-date-picker
                            unlink-panels
                            size="mini"
                            class="mar-left-20"
                            v-model="dateValue"
                            @change="changesearchmac"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00']"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-tooltip>
                <el-input class="search-group mar-left-20" placeholder="请输入设备编号进行搜索" @keyup.enter.native="filterChange" size="mini" v-model="keyword">
                    <el-button slot="append" @click="filterChange">搜索</el-button>
                </el-input>
            </div>
            <!--    表格    -->
            <el-table class="th-bg mar-top-20"
                      @selection-change="selectChange"
                      :data="lists"
                      ref="elTable"
                      :row-key="getRowKeys"
                      v-loading="$store.state.tableLoad"
                      element-loading-text="加载中"
                      element-loading-spinner="el-icon-loading">
                <el-table-column
                        v-if="showSelect"
                        type="selection"
                        :reserve-selection="true"
                        width="55">
                </el-table-column>
                <el-table-column label="序号" prop="name" width="70">
                    <template slot-scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备名称" prop="macName" width="200"></el-table-column>
                <el-table-column label="设备编号" prop="macCode"></el-table-column>
                <el-table-column label="所属加注站" prop="siteName"></el-table-column>
                <el-table-column sortable label="到期时间" align="center" prop="expirationTime"></el-table-column>
                <el-table-column label="设备状态" prop="addTime" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.macStatus === 0" style="color: #4bcb4b">正常</span>
                        <span v-if="scope.row.macStatus == 1" style="color: #bd6d0e">已过期</span>
                        <span v-if="scope.row.macStatus == 2" style="color:red;">已停机</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="addTime" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="renewFunc(scope.row.macId)">续费</el-button>
                        <el-button size="mini" type="primary" @click="openhisList(scope.row.macId)">查看记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            <div class="tips mar-top-20">*注：设备到期后七天内可正常使用，七天后若无续费设备则会自动停机，且需另外缴纳100元的设备复机费用，请在到期前及时续费！</div>-->
            <div class="tips mar-top-20">
                <el-alert
                        title="*注：设备到期后七天内可正常使用，七天后若无续费设备则会自动停机，且需另外缴纳100元的设备复机费用，请在到期前及时续费！"
                        type="error">
                </el-alert>
            </div>
            <div class="f f-a-c f-j-b mar-top-20">
                <div>
                    <el-tooltip class="item" effect="dark" :content="showSelect ?'关闭列表勾选':'开启列表勾选'" placement="top-start">
                        <el-button type="primary" @click="showSelect = !showSelect">
                            <span v-if="!showSelect">批量设置</span>
                            <span v-else>取消</span>
                        </el-button>
                    </el-tooltip>
                    <el-button type="success" v-if="showSelect" @click="manyRenewOpen">确定</el-button>
                </div>
                <el-pagination
                        style="margin-top:0"
                        background
                        :page-size="pageSize"
                        :current-page="page"
                        :total="total"
                        :layout="$tmp.PAGE_LAYOUT"
                        @current-change="changePage">
                </el-pagination>
            </div>
        </div>
        <!-- 续费的弹窗 -->
        <el-dialog
                :append-to-body="true"
                title="设备续费"
                :visible.sync="renewPop"
                width="50%"
                center
                :before-close="closeRenew"
        >
            <div class='f f-j-c pop'>
                <div>
                    <div class="f f-a-c group-one">
                        <div class="pop-name">续费时长:</div>
                        <div class="pop-body">
                            <el-select v-model="timeValue" size="mini" placeholder="请选择" @change="selectMonth">
                                <el-option
                                        v-for="item in timeOpt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        </div>
                        <div class="f f-a-c group-one">
                            <div class="pop-name">{{Number(timeValue)>=12 ? '服务费(元/年)':'服务费(元/月)' }}:</div>
                            <div class="pop-body" v-show="timeValue">{{Number(timeValue)>=12 ? (renewPopInfo.serviceFee/(macIds.split(',').length || 1)):renewPopInfo.serviceFee/(macIds.split(',').length || 1)/Number(timeValue)}}</div>
                        </div>
                        <div class="f f-a-c group-one">
                            <div class="pop-name">复机费:</div>
                            <div class="pop-body">{{renewPopInfo.openMoney}}</div>
                        </div>
                        <div class="f f-a-c group-one">
                            <div class="pop-name">总台数:</div>
                            <div class="pop-body">{{renewPopInfo.macNum}}</div>
                        </div>
                        <div class="f f-a-c group-one">
                            <div class="pop-name mar-top-20">总金额:</div>
                            <div class="pop-body mar-top-20">{{ renewPopInfo.totalMoney }}元</div>
<!--                            <div class="pop-body mar-top-20">{{ timeValue == '' ? 0 :(timeValue*renewPopInfo.serviceFee*renewPopInfo.macNum+renewPopInfo.openMoney)}}元</div>-->
                        </div>
                    </div>
                </div>
            <div class="f f-j-c">
                <el-button type="primary" style="width: 70%;margin-top: 20px;" @click="confirmRenewFunc">确认提交</el-button>
            </div>
        </el-dialog>
        <!-- 查看续费记录弹窗 -->
        <el-dialog
                :append-to-body="true"
                title="续费记录"
                :visible.sync="hisPop"
                width="90%"

        >
            <div class='f f-j-c f-d-c'>
<!--                <el-input style="width: 80%;" size="mini" @keyup.enter.native="getwxaccount" class="search-group" placeholder="请输入手机号或昵称进行搜索" v-model="noticekeyword">-->
<!--                    <el-button slot="append" @click="getwxaccount">搜索</el-button>-->
<!--                </el-input>-->
                <el-table class="th-bg mar-top-20" max-height="380" ref="multipleTable"  :data="hisList" v-loading="$store.state.tableLoad"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                    <el-table-column label="序号" fixed prop="name" width="70">
                        <template slot-scope="scope">
                            <span>{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="续费时间" prop="number" width="170">
                        <span slot-scope="scope">{{scope.row.addTime || '---'}}</span>
                    </el-table-column>
                    <el-table-column label="续费时长(月)" prop="number" width="120" align="center">
                        <span slot-scope="scope">{{scope.row.renewMonths || '---'}}</span>
                    </el-table-column>
                    <el-table-column label="续费金额(元)" prop="number" align="center">
                        <span slot-scope="scope">{{scope.row.feeType == 0 ? scope.row.renewMoney : '---'}}</span>
                    </el-table-column>
                    <el-table-column label="复机费用(元)" prop="number" align="center">
                        <span slot-scope="scope">{{scope.row.feeType == 1 ? scope.row.renewMoney : '---'}}</span>
                    </el-table-column>
<!--                    <el-table-column label="总金额(元)" prop="number" width="150">-->
<!--                        <span slot-scope="scope">{{scope.row.userPhone || '-&#45;&#45;'}}</span>-->
<!--                    </el-table-column>-->
                    <el-table-column label="支付方式" prop="number" width="150">
                        <template slot-scope="scope">
                            <span v-if="scope.row.payType == 1">微信支付</span>
                            <span v-if="scope.row.payType == 2">支付宝支付</span>
                            <span v-if="scope.row.payType == 3">系统支付</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="续费前到期时间" prop="number" width="170">
                        <span slot-scope="scope">{{scope.row.beforeExpireTime || '---'}}</span>
                    </el-table-column>
                    <el-table-column label="续费后到期时间" prop="number" width="170">
                        <span slot-scope="scope">{{scope.row.afterExpireTime || '---'}}</span>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        :page-size="hispageSize"
                        :current-page="hispage"
                        :total="histotal"
                        :layout="$tmp.PAGE_LAYOUT"
                        @current-change="hischangePage">
                </el-pagination>
            </div>
            <div class="f f-j-c">
                <el-button type="primary" style="width: 70%;margin-top: 20px;" @click="hisPop = false">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "expenseManage",
        data(){
            return {
                dateValue:'',//Time
                lists:[],
                hisList:[],
                // dateArr:[],
                keyword:'',
                pageSize:10,
                page:1,
                total:0,
                hispageSize:10,
                hispage:1,
                histotal:0,
                showSelect:false,//勾选(显示 or 隐藏)
                renewPop:false,//续费的弹窗
                hisPop:false,//查看记录弹窗
                timeValue:'',
                timeOpt:[
                    {
                        value:'3',
                        label:'3个月'
                    },
                    {
                        value:'6',
                        label:'6个月'
                    },
                    {
                        value:'12',
                        label:'一年'
                    }
                ],
                macId:'',//单个操作记录的macId
                macIds:'',//勾选的id
                renewPopInfo:{},
                isManyRenew:false,//是否是多选续费
            }
        },
        created() {
            this.dateValue = this.$getDate('e')+' '+'23:59:59';
            // this.dateArr.push(this.$getDate('s')+' '+'00:00:00');
            // this.dateArr.push(this.$getDate('e')+' '+'23:59:59');
            this.getList();
        },
        methods:{

            //关闭续费弹窗
            closeRenew(){
                this.timeValue = '';
                this.renewPopInfo = {};
                this.renewPop = false;
            },

            //选择续费时长触发
            selectMonth(){
                this.$http({
                    url:'/api/serviceFee/toRenewPage',
                    data:{
                        source: 0,
                        months:this.timeValue,
                        macIds:this.isManyRenew ? this.macIds :this.macId
                    },
                    contentType: 'form'
                }).then(res=>{
                    this.renewPopInfo = res.data;
                })
            },

            //确认续费
            confirmRenewFunc(){
                if(this.timeValue == ''){
                    return this.$message.warning('请选择续费时长');
                }
                this.$http({
                    url:"/api/serviceFee/renewFillMachines",
                    data:{
                        source: 0,
                        macIds:this.isManyRenew ? this.macIds:this.macId,
                        months:this.timeValue,//续费时长
                        serviceFee:this.renewPopInfo.serviceFee,//每台机器的服务费
                        openMoney:this.renewPopInfo.openMoney,//复机总费
                        // totalMoney:this.timeValue*this.renewPopInfo.serviceFee*this.renewPopInfo.macNum+this.renewPopInfo.openMoney,//总金额
                        totalMoney: this.renewPopInfo.totalMoney,//总金额
                    },
                    contentType: 'form'
                }).then(res=>{
                    this.$message.success('提交成功,请到服务费账单中支付');
                    this.renewPop = false;
                    //清除勾选状态
                    this.$refs.elTable.clearSelection();
                    this.macId = '';
                    this.controlPop = true;
                })
            },

            //多选续费开启
            manyRenewOpen(){
                if(this.macIds === ''){
                    return this.$message.warning('请勾选数据');
                }
                this.isManyRenew = true;
                this.renewPop = true;
                // this.$http({
                //     url:'/serviceFee/toRenewPage',
                //     data:{
                //         macIds:this.macIds,
                //     }
                // }).then(res=>{
                //     this.renewPopInfo = res.data;
                // })
            },

            //单个续费事件
            renewFunc(macId){
                this.macId = macId;
                this.renewPop = true;
                this.isManyRenew = false;
                this.macId = macId;
            },

            //列表勾选事件
            selectChange(e){
                let arr = [];
                e.forEach((item,index)=>{
                    arr.push(item.macId);
                })
                // if(arr.length != 0){
                //     this.ischeck = true;
                // }else{
                //     this.ischeck = false;
                // }
                this.macIds = arr.join(',');
            },

            //点击日期筛选
            changesearchmac(){
                this.page = 1;
                this.getList();
            },

            //分页事件
            changePage(val){
                this.page = val;
                this.getList();
            },

            //分页
            hischangePage(val){
                this.hispage = val;
                this.getHisList();
            },

            //搜索事件
            filterChange(){
                this.page = 1;
                this.getList();
            },

            // 确定唯一的key值
            getRowKeys(row) {
                return row.macId; // 每条数据的唯一识别值
            },

            //续费记录
            openhisList(Id){
                this.hisPop = true;
                this.macId = Id;
                this.getHisList()
            },

            getHisList(){
                this.$http({
                    url:'/api/serviceFee/getRenewRecord',
                    contentType: 'form',
                    method: 'get',
                    data:{
                        macId:this.macId,
                        limit:this.hispageSize,
                        page:this.hispage
                    },
                }).then(res=>{
                    this.histotal = res.count;
                    this.hisList = res.data;
                })
            },

            //获取数据
            getList(){
                this.$http({
                    url:'/api/serviceFee/getServiceFeeList',
                    isLoading:'actual',
                    method: 'get',
                    data:{
                        startTime:this.dateValue,
                        // startTime:this.dateArr[0],
                        // endTime:this.dateArr[1],
                        keyword:this.keyword,
                        page:this.page,
                        limit:this.pageSize
                    },
                    contentType: 'form'
                }).then(res=>{
                    this.total = res.count;
                    this.lists = res.data;
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .pop{
        .group-one{
            margin-top: 10px;
            &:first-child{
                margin-top: 0;
            }
            &:last-child{
                margin-top: 30px;
                font-size: 16px;
            }
        }
        .pop-name{
            width: 100px;
            text-align: right;
            margin-right: 20px;
            font-weight: bold;
        }
        .pop-body{
            width: 100px;
        }
    }
    .tips{
        color: red;
    }
</style>
